const rotas = document.querySelector('.rotas');
const rotasPro = document.querySelectorAll('.rotas > div');
const rightBtn = document.querySelector('.right');
const leftBtn = document.querySelector('.left');
let deg = 0;
let degImg = 0;

// 定义函数
const changeRotas = (obj, n) => {
    if (n > 0) {
        deg++;
    } else {
        deg--;
    }
    obj.style.transform = `rotateX(-5deg) rotateY(${deg * 60 + 2}deg)`;
};

const changeImgs = (n) => {
    if (n > 0) {
        if (++degImg >= rotasPro.length) {
            degImg = 0;
        }
    } else {
        if (--degImg < 0) {
            degImg = rotasPro.length - 1;
        }
    }
    rotasPro.forEach(el => el.classList.remove('sel'));
    rotasPro[degImg].classList.add('sel');
};

rightBtn.addEventListener('click', () => {
    changeRotas(rotas, 1);
    changeImgs(1);
});

leftBtn.addEventListener('click', () => {
    changeRotas(rotas, -1);
    changeImgs(-1);
});

let autoRota = setInterval(() => {
    changeRotas(rotas, 1);
    changeImgs(1);
}, 3000);